<template>
  <div class="home">
    <div class="headers">
      <Header></Header>
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="changeTab"
      />
    </div>
    <section ref='wrapper'>
      <div>
			<div 
				v-for='(item,index) in newData'
				:key='index'
			>
				<Swiper 
					v-if='item.type=="swiperList"'
					:swiperList='item.data'
				></Swiper>
				
				<Icons 
					v-if='item.type=="iconsList"'
					:iconsList='item.data'
				></Icons>
				
				
				<Recommend 
					v-if='item.type=="recommendList"'
					:recommendList='item.data'
				></Recommend>
				
				<Ad 
					v-if='item.type=="adList"'
					:adList='item.data'
				></Ad>
				
				<Like 
					v-if='item.type=="likeList"'
					:likeList='item.data'
				></Like>
			</div>
		</div>
    </section>
    <footer><Tabbar></Tabbar></footer>
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Swiper from "@/components/home/Swiper.vue";
import Icons from "@/components/home/Icons.vue";
import Header from "@/components/home/Header.vue";
import Recommend from "@/components/home/Recommend.vue";
import Like from "@/components/home/Like.vue";
import Ad from "@/components/home/Ad.vue";
//安装betterscroll插件
import BetterScroll from "better-scroll";
import http from '@/common/api/request.js'
export default {
  components: {
    Tabbar,
    Header,
    Swiper,
    Icons,
    Recommend,
    BetterScroll,
    Like,
    Ad,
  },
  data() {
    return {
      selectedId: 0,
      items: [],
      newData: [],
      oBetterScroll: "",
      tBetterScroll: "",
      options: {
        activeColor: "#b0352f",
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await http.$axios({
        url: "/api/index_list/0/data/1",
      });
      this.items = Object.freeze(res.topBar);
      this.newData = Object.freeze(res.data);

      //当dom都加载完毕了再去执行
      this.$nextTick(() => {
        this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
          click: true,
        });
      });
    },
    async addData(index) {
      let res = await http.$axios({
        url: "/api/index_list/" + index + "/data/1",
      });

      if (res.constructor != Array) {
        this.newData = res.data;
      } else {
        this.newData = res;
      }

      this.$nextTick(() => {
        this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
          click: true,
        });
      });
    },
    changeTab(item, index) {
      this.addData(index);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .headers {
    width: 100vw;
    overflow: hidden;
    // position: fixed;
    // top: 0;
    // left: 0;
    height: 2.3467rem;
    z-index: 999;
    .ly-tab {
      width: 100vw;
      position: fixed;
      top: 1.1733rem;
      left: 0px;
      height: 1.1733rem;
      border: 0;
      z-index: 999;
    }
  }
  .wrapper {
    width: 100vw;
    // flex: 1;
    height: 14rem;
    overflow: hidden;
  }
  footer {
    overflow: hidden;
    height: 1.44rem;
    width: 100vw;
  }
}

::v-deep .ly-tabbar {
  background-color: #fff;
  box-shadow: none;
  border-bottom: none;
  height: 1.1733rem;
}
::v-deep .ly-tab-list {
  padding: 0.3333rem 0.2667rem;
  height: 1.1733rem;
}
</style>